import { defineComponent, reactive, ref, nextTick } from 'vue'
import { useStore } from 'vuex'
import { ElDialog, ElRow, ElCol, ElForm, ElFormItem, ElImage } from 'element-plus'

import styles from '../../index.module.scss'
import type { DetailState, LoopTable } from './typings'
import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import ProSaasTable from '~/components/ProSaasTable'

export default defineComponent({
  setup(props, { expose }) {
    const store = useStore()
    const state = reactive<DetailState>({
      taskDetails: {},
      detailVisible: false
    })
    const proSaasTableRef = ref<ProSaasTableExposeType>()
    // const formValues = reactive<LoopTable>({})

    const open = async (id: string) => {
      state.detailVisible = true
      const res = await store.dispatch('singleLamp/DeviceView', { id })
      state.taskDetails = res.data
      nextTick(proSaasTableRef.value?.toSearch)
    }
    const close = () => {
      state.detailVisible = false
    }

    const columns: TableColumnProps<LoopTable>[] = [
      {
        label: '回路',
        prop: 'num',
        minWidth: 160,
        align: 'center',
        unFixed: true,
        showOverflowTooltip: true,
        sortable: true,
        disabled: true
      },
      {
        label: '方位',
        prop: 'position',
        minWidth: 150,
        align: 'center',
        showOverflowTooltip: true,
        sortable: true,
        render: ({ row }) => <div>{filterPosition(row.position)}</div>
      },
      {
        label: '额定功率',
        prop: 'power',
        minWidth: 160,
        align: 'center',
        showOverflowTooltip: true,
        sortable: true,
        render: ({ row }) => <div>{row.power}W</div>
      }
    ]

    const filterPosition = (position?: string) => {
      switch (position) {
        case '0':
          return '主道'
        case '1':
          return '辅道'
        default:
          return position
      }
    }
    expose({ open })

    return () => (
      <ElDialog
        title="单灯控制器详情"
        modelValue={state.detailVisible}
        beforeClose={close}
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        width={1000}
      >
        <ElForm label-width="100px">
          <ElRow>
            <ElCol span={12}>
              <ElFormItem label="设备名称">{state.taskDetails.name}</ElFormItem>
            </ElCol>
            <ElCol span={12}>
              <ElFormItem label="灯杆名称">{state.taskDetails.lampPostName}</ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow>
            <ElCol span={12}>
              <ElFormItem label="设备编号">{state.taskDetails.code}</ElFormItem>
            </ElCol>
            <ElCol span={12}>
              <ElFormItem label="SIM卡号">{state.taskDetails.simCardNo}</ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow>
            <ElCol span={12}>
              <ElFormItem label="设备型号名称">{state.taskDetails.modelName}</ElFormItem>
            </ElCol>
            <ElCol span={12}>
              <ElFormItem label="设备品牌名称">{state.taskDetails.brandName}</ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow>
            <ElCol span={20}>
              <ElFormItem label="设备图">
                {state.taskDetails?.deviceUrl &&
                  state.taskDetails?.deviceUrl
                    ?.split(',')
                    .map((item: any, index: number) => (
                      <ElImage
                        class={styles['asset-home-light-info-image']}
                        src={item}
                        previewSrcList={item}
                        initialIndex={index}
                        previewTeleported
                      />
                    ))}
              </ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow>
            <ElCol span={20}>
              <ElFormItem label="SIM卡图">
                {state.taskDetails?.simUrl &&
                  state.taskDetails?.simUrl
                    ?.split(',')
                    .map((item: any, index: number) => (
                      <ElImage
                        class={styles['asset-home-light-info-image']}
                        src={item}
                        previewSrcList={item}
                        initialIndex={index}
                        previewTeleported
                      />
                    ))}
              </ElFormItem>
            </ElCol>
          </ElRow>
          <ElFormItem label="单灯回路">
            <ProSaasTable<LoopTable>
              columns={columns}
              data={state.taskDetails?.monitorLampLoopVOList || []}
              needPagination={false}
            />
          </ElFormItem>
        </ElForm>
      </ElDialog>
    )
  }
})
